<template>
	<div class="layout-padding">
		<splitpanes>
			<pane size="20">
				<div class="layout-padding-auto layout-padding-view">
					<el-button-group class="mb-5">
						<el-button>制冷站</el-button>
					</el-button-group>
					<el-tree
						ref="treeRef"
						default-expand-all
						node-key="id"
						:highlight-current="true"
						:current-node-key="currentNodeKey"
						:data="data"
						:props="treeDataProps"
						:expand-on-click-node="false"
						@node-click="handleNodeClick"
					></el-tree>
				</div>
			</pane>
			<pane size="40">
				<div class="layout-padding-auto layout-padding-view">
					<span class="mb-5" style="font-size: 18px"> 常量参数</span>
					<div style="display: flex; justify-content: center">
						<el-form label-width="auto">
							<el-form-item v-for="item in constData" :key="item.name" :label="item.name">
								<el-input v-model="item.value" style="width: 150px" />
								<!-- <el-icon class="ml-5" @click="dialogVisible = true"><InfoFilled /></el-icon> -->
							</el-form-item>
						</el-form>
					</div>
				</div>
			</pane>
			<pane size="40">
				<div class="layout-padding-auto layout-padding-view">
					<span class="mb-5" style="font-size: 18px">调参变量</span>
					<div style="display: flex; justify-content: center">
						<el-form label-width="auto">
							<el-form-item v-for="item in varData" :key="item.name" :label="item.name">
								<el-input v-if="item.type == 'input'" v-model="item.value" style="width: 150px" />
								<el-switch v-else v-model="item.value" active-text="开" inactive-text="关" style="width: 150px" />
								<el-button type="primary" class="ml-5" @click="save(item)"> 保存</el-button>
								<!-- <el-icon class="ml-5" @click="dialogVisible = true"><InfoFilled /></el-icon> -->
							</el-form-item>
						</el-form>
					</div>
				</div>
			</pane>
		</splitpanes>
		<el-dialog v-model="dialogVisible" title="选择时间段分析" width="600">
			<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
				<el-form-item label="请选择时间段" prop="date">
					<el-date-picker v-model="ruleForm.date" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
				</el-form-item>
				<el-form-item label="采样时间间隔" prop="step">
					<el-select v-model="ruleForm.step" placeholder="请选择">
						<el-option label="1分钟" value="1" />
						<el-option label="5分钟" value="5" />
						<el-option label="10分钟" value="10" />
						<el-option label="30分钟" value="30" />
						<el-option label="1小时" value="60" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { getPolicyList, editPolicy } from '/@/api/energymanagement/energyuse/policy';
import { useMessage, useMessageBox } from '/@/hooks/message';

const treeRef = ref();
const currentNodeKey = ref('1');
const treeDataProps = ref({
	label: 'name',
	value: 'id',
	children: 'children',
});
const dialogVisible = ref(false);
const ruleForm = reactive({
	date: '',
	step: '',
});
const ruleFormRef = ref();
const rules = reactive({
	date: [{ required: true, message: '请输入时间段', trigger: 'blur' }],
	step: [{ required: true, message: '请输入采样时间间隔', trigger: 'blur' }],
});
const data = ref([]);
const constData = ref([]);
const varData = ref([]);
const handleNodeClick = (data) => {
	currentNodeKey.value = data.id;
	treeRef.value.setCurrentKey(data.id);
	constData.value = data.constData;
	varData.value = data.varData;
};
onMounted(() => {
	getPolicyList().then((res) => {
		data.value = res.data;
		currentNodeKey.value = res.data[0].id;
		treeRef.value.setCurrentKey(res.data[0].id);
		constData.value = res.data[0].constData;
		varData.value = res.data[0].varData;
	});
});

const save = (item) => {
	editPolicy({
		id: item.id,
		value: item.value,
	}).then((res) => {
		if (res.ok) {
			useMessage().success('保存成功');
		}
	});
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
	display: flex;
	flex-wrap: nowrap;
}
</style>
